//获取ul
let uu = document.querySelector('#container ul')
let what = document.querySelector("#what")
//1.发起请求获取列表数据

//2.根据列表数据展示列表内容

//3.需要将商品的productId绑定到元素上

//4.点击元素进行跳转,跳到detail页面 并且要携带productId
let id = getQueryString('categoryid');
let titleid = getQueryString("title")
// let pageid = 1
let el = "";
let el2 = "";



el2 = `<p>首页> 全部分类> ${titleid}> </p>
 <button>筛选</button>`
what.innerHTML = el2;



fetch('http://chst.vip:1234/api/getproductlist?categoryid=' + id)
    .then(body => body.json())
    .then(res => {
        console.log(res)
        res.result.forEach(item => {
            let regExp = /(?<=imgurl=)[^'"]*/;
            // console.log(item)
            //处理图片
            // let r = item.productImg2.match(regExp);
            // console.log(r)
            el += `<li>
            <a href="../pages/priceSearchListDetail.html?categoryid=${id}&productid=${item.productId}" class="clearfix">
                <div class="img fl">
                    ${item.productImg}
                </div>
                <div class="title">
                    <h4>${item.productName}</h4>
                    <div class="price">${item.productPrice}</div>
                </div>
                <div class="other">
                    <span class="take_price">${item.productQuote}</span>
                    <i class="comment">${item.productCom}<i>
                </div>
            </a>
        </li>`
        })
        uu.innerHTML = el;

    })

// uu.onclick = function (e) {
//     if (e.target.localName === 'li') {
//         let _this = e.target;
//         console.log(_this)
//         //获取当前li标签的productid
//         let id2 = _this.getAttribute('productid')
//         location.href = "../pages/priceSearchListDetail.html?categoryid=" + id + "&" + "productid=" + id2
//         //http://chst.vip:8081/for-stu/wfzh/productlist.html?categoryid=0&productid=0
//         //?categoryid=50&productid=1054
//     }
// }
//封装一个叫做lazyLoad的方法,这个方法需要接受2个桉树
//1.一个函数,当懒加载达到阈值之后,就会回调传入的函数
//2.阈值 达到传入的阈值的时候 对函数进行回调

// function lazyLoad(fn, threshold = 5) {
//     //默认的阈值是50
//     //监听浏览器滚动条滚动事件
//     let flag = true;//默认开关是打开的
//     window.onscroll = function () {
//         let clientHeight = document.documentElement.clientHeight; //获取可视区高度
//         let scrollTop = document.documentElement.scrollTop;
//         let scrollHeight = document.documentElement.scrollHeight;
//         //内容距离可视区底部的距离
//         let distance = scrollHeight - (clientHeight + scrollTop)

//         if (distance < threshold) {
//             if (flag) { //一旦进入 将开关关闭 防止多次触发
//                 flag = false;
//                 // console.log('快要到底部了');
//                 fn()//回调传入的函数
//             }
//         } else {//滚动的距离已经大于了阈值 将开关打开 用户可能滚动条往上滚了
//             flag = true;

//         }
//     }
// }

// lazyLoad(function () {
//     pageid++ //每次被懒加载回调的时候 让id自加 请求不同的数据
//     if (pageid > 14) { //当id大于14的时候 停止发送请求
//         return
//     }
//     $.ajax({
//         url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + id,
//         data: {
//             pageid
//         }
//     })
//         .then(res => {
//             console.log(res);
//             render(res.result)
//             //循环数据 创建结构
//         })
// }, 50)

//----------------------------------------------------------------------------------------------------------
// (function () {
//     //封装一个方法,叫做render,复用这个函数可以将数据 转变成结构 并且添加到页面上
//     let newData = [];//这个数组是用来和原来的数据进行合并,实现追加的效果
//     let pageid = 1;//产品的id
//     let id = getQueryString('categoryid');
//     function render(data = []) {
//         newData = [...newData, ...data]
//         console.log(newData);
//         let html = "" //这个变量用于保存循环创建出来的结构字符串

//         newData.forEach(item => {
//             let regExp = /(?<=imgurl=)[^'"]*/;
//             console.log(regExp)
//             let r = item.productImg2.match(regExp);
//             console.log(r)
//             console.log(item)
//             html += `<li>
//                          <a href="./pages/priceSearchListDetail.html?categoryid=${item.categoryid}&productid=${item.productId}" class="clearfix">
//                             <div class="img fl">
//                                 ${item.productImg}
//                             </div>
//                          <div class="infoR">
//                                <div class="title">
//                                     <h4>${item.productName}</h4>
//                                     <div class="price">${item.productPrice}</div>
//                                </div>
//                                  <div class="other">
//                                      <span class="take_price">${item.productQuote}</span>
//                                      <i class="comment">${item.productCom}<i>
//                                  </div>
//                              </div>
//                          </a>
//                      </li>`
//         })


//         $("#container #uu").html(html)
//     }

//     //封装一个叫做lazyLoad的方法,这个方法需要接受2个桉树
//     //1.一个函数,当懒加载达到阈值之后,就会回调传入的函数
//     //2.阈值 达到传入的阈值的时候 对函数进行回调

//     function lazyLoad(fn, threshold = 5) {
//         //默认的阈值是50
//         //监听浏览器滚动条滚动事件
//         let flag = true;//默认开关是打开的
//         window.onscroll = function () {
//             let clientHeight = document.documentElement.clientHeight; //获取可视区高度
//             let scrollTop = document.documentElement.scrollTop;
//             let scrollHeight = document.documentElement.scrollHeight;
//             //内容距离可视区底部的距离
//             let distance = scrollHeight - (clientHeight + scrollTop)

//             if (distance < threshold) {
//                 if (flag) { //一旦进入 将开关关闭 防止多次触发
//                     flag = false;
//                     // console.log('快要到底部了');
//                     fn()//回调传入的函数
//                 }
//             } else {//滚动的距离已经大于了阈值 将开关打开 用户可能滚动条往上滚了
//                 flag = true;

//             }
//         }
//     }

//     lazyLoad(function () {
//         pageid++ //每次被懒加载回调的时候 让id自加 请求不同的数据
//         if (pageid > 14) { //当id大于14的时候 停止发送请求
//             return
//         }
//         $.ajax({
//             url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + id,
//             data: {
//                 pageid
//             }
//         })
//             .then(res => {
//                 console.log(res);
//                 render(res.result)
//                 //循环数据 创建结构
//             })
//     }, 50)

//     $.ajax({
//         url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + id,
//         data: {
//             pageid: 0
//         }
//     })
//         .then(res => {
//             console.log(res);
//             render(res.result)
//             //循环数据 创建结构
//         })
//         .catch(err => {
//             console.log(err)
//         })
//     //事件委托注册事件
//     // let uu = document.querySelector('#container ul')
//     // uu.onclick = function (e) {
//     //     if (e.target.localName === 'li') {
//     //         let _this = e.target;
//     //         console.log(_this)

//     //         //获取当前li标签的productid

//     //         let id = _this.getAttribute('productid')

//     //         location.href = "../pages/indexDetail.html?productid=" + id
//     //     }
//     // }
// })()


